<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--Meta Informations-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Site Title-->
    <title>登录</title>

    <!--Favicons-->
    <link rel="apple-touch-icon" sizes="60x60" th:href="@{assets/favicon/logo2.png}">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo5.png}" sizes="32x32">
    <link rel="icon" type="image/png" th:href="@{assets/favicon/logo4.png}" sizes="16x16">
    <link rel="manifest" th:href="@{assets/favicon/manifest.json}">
    <link rel="mask-icon" th:href="@{assets/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{assets/favicon/logo3.png}">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!--Style Assets-->
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{vendors/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{vendors/owl/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{vendors/magnific/magnific-popup.css}">

    <!--Theme Style-->
    <link rel="stylesheet" th:href="@{assets/css/styles.css}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body onload="checkForm()" onkeydown="on_return();">

<div id="page" class="site row">

    <h1 class="sr-only">登录</h1>

    <header id="header" class="site-header">

        <nav class="navbar navbar-defatult navbar-fixed-top fluid-navbar navbar-style1">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a th:href="@{/}" class="navbar-brand">
                        <img th:src="@{assets/icons/logo9.png}" alt="" class="logo-img"/></a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav"
                            aria-expanded="false">
                        <span class="sr-only">Nav Opener</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="main-nav">
                    <ul class="navbar-nav nav navbar-right">
                        <li><a href="/">主页</a></li>
                        <li class="active"><a href="login">
                            <i class="fa fa-sign-in"></i> 登录 </a>
                        </li>
                        <li><a href="register"><i class="fa fa-user"></i> 注册 </a></li>
                        <!--                        <li><a href="#">Buy Pro Version</a></li>-->
                    </ul>
                </div>
            </div>
        </nav>
        <!--Page Cover-->
        <section class="row page-cover" data-slide="assets/images/slide1.jpg">
        </section>
    </header>

    <main id="contents" class="site-contnts">
        <!--404 Contents-->
        <section class="row">
            <div class="container">
                <div class="col-sm-3"></div>
                <div class="col-sm-6 contact-form-box contact-box">
                    <h2 class="cb-title">登录 <strong>Mlearning</strong></h2>
                    <form name="loginForm" method="post" class="contact-form" action="login" onsubmit="check()">
                        <div class="form-group" style="background:#f2f6f8 ">
                            <label for="login_name">邮箱</label>
                            <input type="email" name="email" id="login_name" placeholder=""
                                   class="form-control" required="required">
                        </div>
                        <div class="form-group" style="background:#f2f6f8 ">
                            <label for="login_pd">密码</label>
                            <input type="password" id="login_pd" placeholder="" class="form-control"
                                   required="required">
                            <input type='hidden' name="password" id='sha_pwd' value=''/>
                        </div>
                        <input id="message" type="hidden" name="message" class="form-control"
                               style="text-align: center;color: red;" th:value="${message}">
                        <input id="sub" type="submit" value="登录" class="btn btn-primary" style="width: 100%;">
                        <div class="form-group" style="background:#f2f6f8 ">
                            <label for="login_pd" align="center">还没有账号？<a href="register"><u>立即注册</u></a></label>
                        </div>
                    </form>
                </div>
                <div class="col-sm-3"></div>
            </div>
        </section>
    </main>

    <!--Footer-->
    <footer id="footer" class="site-footer">
        <!--Footer Bottom-->
        <section class="row site-footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 widget-footer">
                        <div class="row widget-content">
                            <ul class="menu">
                                <li style="color: #939393">鲁ICP备20006308</li>
                                <li>
                                    <a target="_blank"
                                       href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202000992"
                                       style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                                        <img th:src="@{assets/images/beian.png}" style="float:left;"/>
                                        <p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
                                            鲁公网安备 37011202000992号</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script th:src="@{vendors/jquery.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{vendors/owl/owl.carousel.min.js}"></script>
<script th:src="@{vendors/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{vendors/magnific/jquery.magnific-popup.min.js}"></script>
<script th:src="@{vendors/isotope.pkgd.min.js}"></script>
<script th:src="@{vendors/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{vendors/form-validator/jquery.form.js}"></script>
<script th:src="@{vendors/form-validator/jquery.validate.min.js}"></script>

<script th:src="@{assets/js/contact.js}"></script>
<!--Theme JS-->
<script th:src="@{assets/js/hostpro.js}"></script>
<script th:src="@{assets/js/bg.js}"></script>
<script th:src="@{sha/sha1.js}"></script>
<script>
    function check() {
        var pwd = document.getElementById("login_pd");
        var sha_pd = document.getElementById("sha_pwd");
        $('#sha_pwd').val(sha1($('#login_pd').val()));
        return true;
    }

    function checkForm() {
        var flag = true;
        var message = document.loginForm.message.value;
        if (message !== 'null' && message !== "" && message != null) {
            // alert(message);
            document.getElementById("message").type = "text";
            flag = false;
        }
        return flag;
    }

    //回车时，默认是登陆
    function on_return() {
        if (window.event.keyCode === 13) {
            if (document.getElementById('sub') != null) {
                document.getElementById('sub').click();
            }
        }
    }
</script>
</body>
</html>